<script setup>
import { onLoad,onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { apiGetBannerList,apiGetNavList,apiGetRec } from "@/api/home.js"
import customNavBarVue from '@/components/custom-nav-bar/custom-nav-bar.vue';
import recItemVue from '@/components/rec-item/rec-item.vue';
onLoad(async()=>{
  getBannerList()
  getNavList()
  getRec()
})
//获取轮播图
const bannerList = ref([]);
const getBannerList = async() =>{
  const res = await apiGetBannerList()
  bannerList.value = res
}
//获取nav导航栏图片
const navList = ref([])
const getNavList = async() =>{
  const res = await apiGetNavList()
  navList.value = res
  // console.log('nav',res)
}
//获取推荐课程
const recList = ref([])
const getRec = async() =>{
  uni.showLoading({
    title:'加载中',
    mask:true
  })
  const res = await apiGetRec() 
  recList.value = [...recList.value,...res]
  setTimeout(()=>{
    uni.hideLoading()
  },500)
}
//触底加载
// onReachBottom(()=>{
//   getRec()
//   console.log(123123123123123123);
// })


</script>

<template>
  <view class="homeLayout pageBg">
    <customNavBarVue></customNavBarVue>
    <!-- 轮播图 -->
    <view class="banner">
      <swiper indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" autoplay circular>
        <swiper-item v-for="(item, index) in bannerList" :key="item.id" :title="item.remark">
          <image :src="item.fileUrl" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 导航栏 -->
    <view class="nav-list">
      <view class="nav-box">
        <view class="nav" v-for="item in navList" :key="item.id">
          <image :src="item.fileUrl" mode="aspectFill"></image>
          <text>{{item.remark}}</text>
        </view>
      </view>
    </view>
    <!-- 推荐课程 -->
   <view class="recommend">
      <h1 class="title">推荐课程</h1>
      <view class="rec-box">
        <recItemVue v-for="item in recList" :course="item" :key="item.id"></recItemVue>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.homeLayout {
  .banner {
    width: 750rpx;
    padding: 30rpx 0;
    swiper {
      width: 750rpx;
      height: 340rpx;
      &-item {
        width: 100%;
        height: 100%;
        padding: 0 30rpx;
      }
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
}

.nav-list {
  padding: 0 30rpx;
  height: 150rpx;
  box-sizing: border-box;

  .nav-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    height: 100%;
    background-color: #f8fafd;
    border-radius: 12px; 

    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.05),  inset 0 -2px 3px rgba(255, 255, 255, 0.8); 

    border: 1px solid rgba(220, 220, 220, 0.15);

    .nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      image {
        width: 60rpx;
        height: 60rpx;
      }
      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}


.recommend {
  width: 100%;
  padding: 30rpx;

  .title {
    font-size: 40rpx;
    font-weight: 500;
    margin-bottom: 30rpx;
    color: #333;
    letter-spacing: 1rpx;
    position: relative;

    &::after {
      content: '';
      display: block;
      // width: 80rpx;
      height: 6rpx;
      background: linear-gradient(90deg, #7ac9a3, #f2c18d);
      border-radius: 3rpx;
      margin-top: 10rpx;
    }
  }

  /* Masonry 布局 */
  .rec-box {
    column-count: 2;
    column-gap: 24rpx;
    animation: fadeInContainer 0.6s ease both;

    /* 关键：让子元素之间间距更柔和 */
    > view {
      animation: fadeUp 0.6s ease both;
      animation-delay: calc(var(--i, 0) * 0.05s); // 可选，用来做渐进动画
    }
  }

  /* 整体容器淡入 */
  @keyframes fadeInContainer {
    from {
      opacity: 0;
      transform: translateY(20rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 每个 item 的上浮入场 */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(40rpx) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}


</style>
